<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:include="http://www.w3.org/1999/xhtml">
<head th:include="include::footer">
    <title>头像上传</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="/springboot/js/jquery.1.7.2.min.js"></script>
    <script type="text/javascript" src="/springboot/js/jquery-form.js"></script>
</head>

<body>
<div th:include="include::footer"></div>
<table>
    <tr>
        <td  id="imgDiv">
            <img id="imgid" th:src="@{/img/about-slider-01.jpg}" style="width:137px; height:127px"/>
        </td>
    </tr>
</table>
<form id="upload" enctype="multipart/form-data" action="/login" method="post"><p style='color:red;text-align:left;'>
    注：<br/>1.照片的像素为160*180px。<br/>2.照片格式为BMP/JPG/JPEG。<br/>3.建议照片大小不超过40k。</p>
    <input type="file" name="file" id="uploadimage"/><br/>
    <input type="button" value="上传" id="btn" style="width:137px; height:27px"/>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#btn").click(function () {
            if(confirm("确认上传？")){
                var imagePath = $("#uploadimage").val();
                if (imagePath == "") {
                    alert("please upload image file",2);
                    return false;
                }
                var strExtension = imagePath.substr(imagePath.lastIndexOf('.') + 1);
                if (strExtension!='jpg') {
                    if (strExtension!='bmp') {
                        if (strExtension!='png') {
                            alert("please upload file that is a image",2);
                            return false;
                        }
                    }
                }
                $("#upload").ajaxSubmit({
                    type : 'POST',
                    url : '/iphone/touxiang',
                    success : function(result) {
                        if(result.state=='0'){
                            $("#imgDiv").empty();
                            $("#imgDiv").html('<img src="'+result.data+'" style="width:137px;height:127px;"/>');
                            $("#imgDiv").show();
                            $("#uploadimage").val("");
                        }else{
                            alert(result.msg+":"+result.data);
                        }
                    },
                    error : function() {
                        alert("上传失败，请检查网络后重试,上传文件太大");
                    }
                });
            }
        })
    });
</script>
</body>
</html>